<template>
  <view :data-weui-theme="theme">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="avatarUrl"></image>
    </button>
    <form @submit="formSubmit">
      <view class="row">
        <view class="text1">昵称：</view>
        <input class="weui-input" name="nickname" v-model="nickname" placeholder="请输入昵称" />
      </view>
      <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
    </form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        theme: uni.getSystemInfoSync().theme,
        avatarUrl: '',
        nickname: '',
      }
    },
    methods: {
      onChooseAvatar(event) {
        const {
          avatarUrl
        } = event.detail
        this.avatarUrl = avatarUrl;
      },
      formSubmit(event) {
	    // 将图片昵称存本地
	    uni.setStorageSync("avatar", this.avatarUrl);
	    uni.setStorageSync("nickname", this.nickname);
        uni.navigateBack({
          url: '/pages/mine/mine',
        });
      }
    }
  }
</script>

<style>
  .avatar-wrapper {
    padding: 0;
    width: 56px !important;
    border-radius: 8px;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #fff;
  }

  .avatar {
    display: block;
    width: 56px;
    height: 56px;
  }

  .container {
    display: flex;
  }

  .row {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    height: 80rpx;
    padding-left: 20rpx;
  }

  .text1 {
    flex: 2;
  }

  .weui-input {
    flex: 6;
  }
</style>
